<template>
    <div class="message">
        <!-- tab -->
        <div class="message__content">
            <div class="message__content__left">
                <van-button :disabled="!checkboxValue.length" @click="autoRead(1)">标记已读</van-button>
                <div @click="autoRead(2)">全部已读</div>
            </div>
            <div>未读消息<span class="message-Unread">（{{ unreadMessage }}）</span></div>
        </div>

        <!-- 列表 -->
        <div class="message-content-list">
            <PaginationList v-slot="{ dataList }" :request-data="requestData" :bottom-position="2" ref="listRef">
                <MessageListItem v-model="checkboxValue" :data-list="dataList" />
            </PaginationList>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Result } from '@/utils/request'
import { useUserStore } from '@/stores/user'
import { isSafariBrowser } from '@/utils/browser'
import { confirmDialog } from '@/utils/confirmDialog'
import PaginationList from '@/components/PaginationList.vue'
import MessageListItem from './components/MessageListItem.vue'
import { clickMessage, getAllTypeNUmber, getNoticeList } from '@/api/message'

onMounted(() => {
    tabClick()
    getNumber()
    isSafari.value = isSafariBrowser();
})

const store = useUserStore()

const checkboxValue = ref([])

//未读数量
const unreadMessage = ref(0)

const isSafari = ref(false);

//多选 选中
// const activeCheckbox = ref([])

const listRef = ref<InstanceType<typeof PaginationList>>()

// 获取列表数据
const requestItems = (message_type: string, user_id: string, pageIndex: number, pageSize: number,): Promise<Result> => {
    return new Promise((resolve, reject) => {
        getNoticeList(
            pageIndex,
            pageSize,
            user_id,
            message_type).then((res: any) => {
                resolve({
                    ...res,
                    total: res.count,
                    data: res.data
                })
            }).catch((err) => {
                reject(err)
            });
    })
}

//获取上拉下拉数据
const requestData = (pageIndex: number, pageSize: number) => {
    return requestItems('2', store.AppState.userId, pageIndex, pageSize,)
}

// 获取工单列表
const tabClick = () => {
    if (listRef.value) {
        listRef.value.$el.scrollTop = 0
        listRef.value?.dataInitialization()
    }
}

// 获取未读数量
const getNumber = async () => {
    try {
        const res: any = await getAllTypeNUmber(store.AppState.userId)

        unreadMessage.value = res.communication_message_num
    } catch (error) {
        //
    }
}

// 标记已读,全部已读
const autoRead = (type: number) => {
    try {
        const title = type === 1 ? '标记已读' : '全部已读'

        const message = type === 1 ? '是否要将选中消息标记已读' : '是否要将消息全部已读'

        confirmDialog({ title, message }, async () => {
            const params = {
                is_all_read: type,
                user_id: store.AppState.userId,
                message_ids: checkboxValue.value
            }

            const res = await clickMessage(params)

            if (res.statusCode === 200) {
                tabClick()

                getNumber()

                showSuccessToast('操作成功');

                checkboxValue.value = []
            }
        })
    } catch (error) {
        //
    }

}
</script>

<style lang="scss" scoped>
.message {
    padding: 10px;
    box-sizing: border-box;

    .message__content {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 600;

        .message__content__left {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .message-mark {
                color: #bebebe;
            }

            .van-button {
                height: 0px;

            }

            .van-button--default {
                border: none;

            }

            .van-button--normal {
                padding: 2px 10px 0 0;

            }
        }

        .message-Unread {
            color: #bf1920;
        }
    }

    .message-content-list {
        height: calc(100dvh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }
}

/* iOS specific styles (Safari and Edge) */
@supports (-webkit-touch-callout: none) {
    .message {
        .message-content-list {
            height: calc(100dvh - 10px);
            padding-bottom: 0;
        }
    }
}

/* iOS Edge specific styles */
@supports (-webkit-touch-callout: none) and (-webkit-appearance: none) {
    .message {
        .message-content-list {
            padding-bottom: 120px;
        }
    }
}
</style>